import { Button, Tooltip } from "@openbb/ui-pro";
import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import CustomIcon from "./Icon";

// Define types
interface Extension {
	id: string;
	name: string;
	description: string;
	category: string;
	credentials?: string[] | [];
	instructions?: string | null;
}

interface ExtensionCategory {
	id: string;
	name: string;
	description: string;
}

const categories: ExtensionCategory[] = [
	{
		id: "conda",
		name: "Conda Packages",
		description: "Conda packages to install before PyPI packages.",
	},
	{
		id: "extras",
		name: "PyPI Packages",
		description:
			"Add packages from PyPI. Pandas, Numpy, Pydantic, FastAPI, are already included.",
	},
	{
		id: "provider",
		name: "Data Providers",
		description: "Data providers supplying data through the OpenBB provider interface.",
	},
	{
		id: "router",
		name: "Routers",
		description: "API paths and endpoints implementing the OpenBB command interface.",
	},
	{
		id: "other-openbb",
		name: "Others",
		description: "Additional OpenBB extensions that enhance the functionality of the OpenBB package.",
	},
];

// Python Version Selector Component
export const PythonVersionSelector = ({
    onSelectVersion,
}: {
    onSelectVersion: (version: string) => void;
}) => {
    const [selectedVersion, setSelectedVersion] = useState<string>("3.13");

    const handleChange = (version: string) => {
        setSelectedVersion(version);
        onSelectVersion(version);
    };

    useEffect(() => {
        onSelectVersion("3.13")
    }, []);

	return (
		<div className="w-full pb-5">
			<p className="body-md-medium text-theme-primary mb-3">Select Python Version</p>
			<div className="flex-1 items-center justify-between">
				<div className="flex flex-row gap-8">
					{["3.10", "3.11", "3.12", "3.13"].map((version) => (
						<label
							key={version}
							className="flex items-center gap-2 cursor-pointer body-xs-regular text-theme-primary"
						>
							<input
								type="radio"
								name="python-version"
								value={version}
								checked={selectedVersion === version}
								onChange={() => handleChange(version)}
								className="sr-only text-theme-accent"
							/>
							<span
								className={`relative flex items-center justify-center h-5 w-5 rounded-full border-2 ${
									selectedVersion === version
									? "border-theme-radio"
									: "border-theme"
								}`}
							>
								{selectedVersion === version && (
									<span className="h-2 w-2 rounded-full bg-theme-neutral" />
								)}
							</span>
							<span className="body-sm-regular text-theme-secondary">{version}</span>
						</label>
					))}
				</div>
			</div>
		</div>
	);
};

export const ExtensionSelector = ({
  onInstallExtensions,
  installedPackages = new Set(),
  onCancel,
}: {
  onInstallExtensions: (extensionIds: string[]) => void;
  installedPackages?: Set<string>;
  onCancel?: () => void;
}) => {
  const [extensions, setExtensions] = useState<Extension[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activeCategoryTab, setActiveCategoryTab] = useState(categories[0].id);
  const [localSearchQuery, setLocalSearchQuery] = useState("");

  // Track selected extensions - start with an empty array for no pre-selection
  const [selectedExtensions, setSelectedExtensions] = useState<string[]>([]);

  // Track custom packages
  const [customPackage, setCustomPackage] = useState("");
  const [customPackages, setCustomPackages] = useState<string[]>([]);

  // Track conda packages
  const [condaPackage, setCondaPackage] = useState("");
  const [condaPackages, setCondaPackages] = useState<string[]>([]);
  const [condaChannel, setCondaChannel] = useState("conda-forge");

  // Track installation state
  const [isInstalling, setIsInstalling] = useState(false);
  const [creationComplete, setCreationComplete] = useState(false);

  const extrasExtensions = [
    {
      id: "openbb-mcp-server",
      name: "OpenBB MCP Server",
      description: "Convert OpenBB routes, endpoints, and FastAPI instances to run over the Model Context Protocol (MCP).",
      category: "other-openbb",
      credentials: [],
    },
	{
	  id: "pywry",
	  name: "PyWry",
	  description: "PyWry is a Python wrapper of the Tauri Window builder.",
	  category: "other-openbb",
	  credentials: [],
	},
	{
	  id: "openbb-cli",
	  name: "OpenBB CLI",
	  description: "Command line interface for OpenBB",
	  category: "other-openbb",
	  credentials: [],
	},
  ];

  // Update the getFilteredExtensions function to use the new hasMatchingExtensions
  const getFilteredExtensions = (categoryId: string) => {
	let categoryExtensions = extensions.filter(
	  (ext) => ext.category === categoryId,
	);

	// Filter out already installed packages for provider, router, and other-openbb categories
	if (categoryId === "provider" || categoryId === "router" || categoryId === "other-openbb") {
	  categoryExtensions = categoryExtensions.filter(
		(ext) => !installedPackages.has(ext.id.toLowerCase())
	  );
	}

	if (!localSearchQuery.trim()) {
	  return categoryExtensions;
	}

	const query = localSearchQuery.toLowerCase();
	return categoryExtensions.filter(
	  (ext) =>
		ext.id.toLowerCase().includes(query) ||
		ext.name.toLowerCase().includes(query) ||
		ext.description.toLowerCase().includes(query),
	);
  };



  // Add a conda package
  const addCondaPackage = () => {
	if (!condaPackage.trim() || !condaChannel.trim()) return;

	const newPackage = `${condaChannel.trim()}:${condaPackage.trim()}`;
	// Avoid duplicates
	if (!condaPackages.includes(newPackage)) {
	  setCondaPackages((prev) => [...prev, newPackage]);
	}

	setCondaPackage("");
  };

  // Add a custom package
  const addCustomPackage = () => {
	if (!customPackage.trim()) return;

	// Avoid duplicates
	if (!customPackages.includes(customPackage.trim())) {
	  setCustomPackages((prev) => [...prev, customPackage.trim()]);
	}

	setCustomPackage("");
  };

  // Remove a conda package
  const removeCondaPackage = (pkg: string) => {
	setCondaPackages((prev) => prev.filter((p) => p !== pkg));
  };

  // Remove a custom package
  const removeCustomPackage = (pkg: string) => {
	setCustomPackages((prev) => prev.filter((p) => p !== pkg));
  };

  // Load extensions from GitHub
  useEffect(() => {
	const fetchExtensions = async () => {
	  setLoading(true);
	  try {
		const [providersRes, routersRes, obbjectsRes] = await Promise.all([
		  fetch(
			"https://raw.githubusercontent.com/OpenBB-finance/OpenBB/main/assets/extensions/provider.json",
		  ),
		  fetch(
			"https://raw.githubusercontent.com/OpenBB-finance/OpenBB/main/assets/extensions/router.json",
		  ),
		  fetch(
			"https://raw.githubusercontent.com/OpenBB-finance/OpenBB/main/assets/extensions/obbject.json",
		  ),
		]);

		if (!providersRes.ok || !routersRes.ok || !obbjectsRes.ok) {
		  throw new Error("Failed to fetch extensions data");
		}

		const providers = await providersRes.json() as Array<{
		  packageName: string;
		  reprName?: string;
		  description?: string;
		  credentials?: string[];
		  instructions?: string | null;
		}>;
		const routers = await routersRes.json() as Array<{
		  packageName: string;
		  reprName?: string;
		  description?: string;
		  credentials?: string[];
		  instructions?: string | null;
		}>;
		const obbjects = await obbjectsRes.json() as Array<{
		  packageName: string;
		  reprName?: string;
		  description?: string;
		  credentials?: string[];
		  instructions?: string | null;
		}>;

		// Map to common format with categories
		const mappedExtensions: Extension[] = [
		  ...providers.map((item) => ({
			id: item.packageName,
			name: item.reprName || item.packageName,
			description: item.description || "No description available",
			category: "provider",
			credentials: item.credentials || [],
			instructions: item.instructions || null,
		  })),
		  ...routers.map((item) => ({
			id: item.packageName,
			name: item.reprName || item.packageName,
			description: item.description || "No description available",
			category: "router",
			credentials: item.credentials || [],
			instructions: item.instructions || null,
		  })),
		  ...obbjects.map((item) => ({
			id: item.packageName,
			name: item.reprName || item.packageName,
			description: item.description || "No description available",
			category: "other-openbb",
			credentials: item.credentials || [],
			instructions: item.instructions || null,
		  })),
		  ...extrasExtensions,
		];

		setExtensions(mappedExtensions);
	  } catch (err) {
		console.error("Error fetching extensions:", err);
		setError(
		  "Failed to load extensions. Please try again or continue without extensions.",
		);
	  } finally {
		setLoading(false);
	  }
	};

	fetchExtensions();
  }, []);

  // Toggle an extension selection
  const toggleExtension = (id: string) => {
	setSelectedExtensions((prev) =>
	  prev.includes(id) ? prev.filter((extId) => extId !== id) : [...prev, id],
	);
  };

  // Select all in a category
  const selectCategory = (categoryId: string) => {
	let categoryExtensions = extensions.filter((ext) => ext.category === categoryId);

	// Filter out already installed packages for provider, router, and other-openbb categories
	if (categoryId === "provider" || categoryId === "router" || categoryId === "other-openbb") {
	  categoryExtensions = categoryExtensions.filter(
		(ext) => !installedPackages.has(ext.id.toLowerCase())
	  );
	}

	const categoryExtensionIds = categoryExtensions.map((ext) => ext.id);

	setSelectedExtensions((prev) => {
	  // Remove any existing ones from this category
	  const filtered = prev.filter((id) => !categoryExtensionIds.includes(id));
	  // Add all from this category
	  return [...filtered, ...categoryExtensionIds];
	});
  };

  // Clear all in a category
  const clearCategory = (categoryId: string) => {
	let categoryExtensions = extensions.filter((ext) => ext.category === categoryId);

	// Filter out already installed packages for provider, router, and other-openbb categories
	if (categoryId === "provider" || categoryId === "router" || categoryId === "other-openbb") {
	  categoryExtensions = categoryExtensions.filter(
		(ext) => !installedPackages.has(ext.id.toLowerCase())
	  );
	}

	const categoryExtensionIds = categoryExtensions.map((ext) => ext.id);

	setSelectedExtensions((prev) =>
	  prev.filter((id) => !categoryExtensionIds.includes(id)),
	);
  };

  // Get extensions for a specific category
  const getExtensionsByCategory = (categoryId: string) => {
	let categoryExtensions = extensions.filter((ext) => ext.category === categoryId);

	// Filter out already installed packages for provider, router, and other-openbb categories
	if (categoryId === "provider" || categoryId === "router" || categoryId === "other-openbb") {
	  categoryExtensions = categoryExtensions.filter(
		(ext) => !installedPackages.has(ext.id.toLowerCase())
	  );
	}

	return categoryExtensions;
  };

  // Count selected extensions in a category
  const countSelectedInCategory = (categoryId: string) => {
	const categoryExtensions = getExtensionsByCategory(categoryId);
	const categoryExtensionIds = categoryExtensions.map((ext) => ext.id);

	return selectedExtensions.filter((id) => categoryExtensionIds.includes(id))
	  .length;
  };

  // Handle installation with selected extensions and custom packages
  const handleInstallExtensions = async () => {
	try {
	  setIsInstalling(true);
	  setError(null);

	  const condaPackagesWithChannel = condaPackages.map(
		(pkg) => `conda:${pkg}`,
	  );
	  const extensionsToInstall = [
		...selectedExtensions,
		...customPackages,
		...condaPackagesWithChannel,
	  ];

	  console.log("Installing extensions:", extensionsToInstall);

	  // Call installation and wait for completion
	  onInstallExtensions(extensionsToInstall);

	  console.log("Extension installation completed successfully");
	} catch (error) {
	  console.error("Installation failed:", error);
	  setError(`Installation failed: ${error}`);
	} finally {
	  // Always reset the installing state
	  setIsInstalling(false);
	  setCreationComplete(true);
	}
  };

	const hasMatchingExtensions = (extensions: Extension[], categoryId: string, query: string, installedPackages: Set<string>): boolean => {
	if (!query.trim()) return true; // Always show all tabs when no search
	let categoryExtensions = extensions.filter((ext) => ext.category === categoryId);

	// Filter out already installed packages for provider, router, and other-openbb categories
	if (categoryId === "provider" || categoryId === "router" || categoryId === "other-openbb") {
		categoryExtensions = categoryExtensions.filter(
		(ext) => !installedPackages.has(ext.id.toLowerCase())
		);
	}

	const queryLower = query.toLowerCase();
	return categoryExtensions.some(
		(ext) =>
		ext.id.toLowerCase().includes(queryLower) ||
		ext.name.toLowerCase().includes(queryLower) ||
		ext.description.toLowerCase().includes(queryLower)
	);
	};


	const getCheckboxState = (categoryId: string) => {
		const categoryExtensions = getExtensionsByCategory(categoryId);
		const totalCount = categoryExtensions.length;
		const selectedCount = countSelectedInCategory(categoryId);

		if (selectedCount === 0) return 'checked';
		if (selectedCount === totalCount) return 'indeterminate';
		return 'indeterminate';
	};

  // Update the useEffect to use the new hasMatchingExtensions
  useEffect(() => {
	// If current active tab has no matches, switch to first available tab
	if (!hasMatchingExtensions(extensions, activeCategoryTab, localSearchQuery, installedPackages)) {
	  const firstMatchingCategory = categories.find(category =>
		hasMatchingExtensions(extensions, category.id, localSearchQuery, installedPackages)
	  );
	  if (firstMatchingCategory) {
		setActiveCategoryTab(firstMatchingCategory.id);
	  }
	}
  }, [localSearchQuery, activeCategoryTab, extensions, installedPackages]);

  return (
	<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center px-5">
	  <div className="pt-3 px-3 pb-6 bg-theme-secondary rounded-lg border border-theme-modal shadow-md w-full">
		{loading ? (
		  <div className="flex justify-center items-center p-8 text-theme-primary">
			<div className="animate-spin rounded-full h-8 w-8 border-theme-color" />
			<span className="ml-2 body-xs-regular text-theme-primary">Loading extensions...</span>
		  </div>
		) : (
		  <>
		  	{(!isInstalling && !error && !creationComplete) && (
				<div className="flex items-center justify-between">
					<p className="text-theme-secondary body-sm-medium">
						STEP <span className="text-theme-accent">3</span> OF <span className="text-theme-accent">3</span>
					</p>
					<Tooltip
						content="Cancel and go back."
						className="tooltip-theme"
					>
						<Button
							className="button-ghost"
							onClick={onCancel}
							variant="ghost"
							size="icon"
							disabled={isInstalling}
						>
							<CustomIcon id="close" className="h-6 w-6" />
						</Button>
					</Tooltip>
				</div>
			)}

			<div className="bg-theme-tertiary px-3 py-2 mt-2 rounded-md mb-5">
				<p className="body-md-bold text-theme-primary mb-2">
					Select Extensions
				</p>
			{/* Tab bar for categories */}
			<div className="flex gap-5 whitespace-nowrap mb-3 border-b-2 border-theme-accent">
			  {categories
				.filter(category => hasMatchingExtensions(extensions, category.id, localSearchQuery, installedPackages))
				.map((category, idx) => (
				  <div key={category.id} className="flex items-center">
					<button
					  type="button"
					  className={`py-1 text-theme transition-colors
						${idx === 0 ? 'pl-0' : 'px-0'}
						${activeCategoryTab === category.id
						  ? "body-sm-bold border-b tab-border-active text-theme-accent relative -bottom-0.5"
						  : "body-sm-medium text-theme-muted relative -bottom-0.5 "}
						focus:outline-none
					  `}
					  onClick={() => setActiveCategoryTab(category.id)}
					  aria-selected={activeCategoryTab === category.id}
					  role="tab"
					>
					  {category.name}
					</button>
				  </div>
				))}
			</div>

			{/* Category description and select/clear all button */}
			<div className="mb-3 flex justify-between items-center">
			  <p className="body-sm-regular text-theme-primary break-words">
				{categories.find(c => c.id === activeCategoryTab)?.description}
			  </p>
			</div>

			{/* Search input */}
			{activeCategoryTab !== "conda" && activeCategoryTab !== "extras" && (
			  <div className="flex items-center gap-2">
				<div className="flex-1 relative">
				  <span className="absolute inset-y-0 left-0 flex items-center pl-2 text-theme-muted">
					<CustomIcon id="search" className="h-4 w-4" />
				  </span>
				  <input
					id="extension-search"
					type="text"
					placeholder="Search extensions..."
					value={localSearchQuery}
					onChange={(e) => setLocalSearchQuery(e.target.value)}
					className="!pl-[30px] w-full body-xs-regular p-2 bg-theme-secondary rounded-md whitespace-nowrap"
					disabled={loading}
					spellCheck="false"
				  />
				</div>
			  </div>
			)}

			{/* Only show the active tab's category content */}
			<div className="mb-3">
			  {categories.map((category) => {
				if (category.id !== activeCategoryTab) return null;

				const categoryExtensions = getFilteredExtensions(category.id);

				return (
				  <div key={category.id}>
					<div className="flex items-center justify-between">
					  <div className="flex-1" />
					</div>

					<div>
					  {/* Select all row for applicable categories */}
					  {(category.id === "provider" || category.id === "router" || category.id === "other-openbb") && (
						<div className="mt-2 divide-y">
							<Tooltip
								content="Deselect all extensions in this category"
								className="tooltip tooltip-theme"
							>
								<input
									type="checkbox"
									checked={(getCheckboxState(activeCategoryTab) === 'checked')}
									onChange={() => {
										if (
											countSelectedInCategory(activeCategoryTab) > 0
										) {
											clearCategory(activeCategoryTab);
										} else {
											selectCategory(activeCategoryTab);
										}
									}}
									className={`checkbox ${getCheckboxState(activeCategoryTab) === 'indeterminate' ? 'indeterminate' : ''}`}
								/>
							</Tooltip>
						  {/* Select All Button */}
						  <Tooltip
							content="Select all extensions in this category."
							className="tooltip tooltip-theme"
						  >
							<Button
							  variant="ghost"
							  onClick={() => selectCategory(activeCategoryTab)}
							  className="button-ghost ml-0 body-sm-medium relative -top-0.5"
							  size="xs"
							>
							  Select All
							</Button>
						  </Tooltip>
						</div>
					  )}
					  {/* Conda packages input */}
					  {category.id === "conda" && (
						<div className="space-y-4 p-1">
						  <div className="flex items-end gap-4">
							<div className="flex-1">
							  <label htmlFor="conda-channel" className="body-sm-bold text-theme-secondary mb-1 block">
								Channel
							  </label>
							  <input
								id="conda-channel"
								type="text"
								placeholder="conda-forge"
								className="form-input text-sm border-theme-accent rounded p-1 w-full body-sm-regular text-theme-primary shadow-md"
								value={condaChannel}
								spellCheck="false"
								onChange={(e) => setCondaChannel(e.target.value)}
							  />
							</div>
							<div className="flex-1">
							  <label htmlFor="conda-package" className="body-sm-bold text-theme-secondary mb-1 block">
								Package
							  </label>
							  <input
								id="conda-package"
								type="text"
								placeholder="Conda Package Name"
								className="form-input text-sm border-theme-accent rounded p-1 w-full body-sm-regular text-theme-primary shadow-md"
								value={condaPackage}
								onChange={(e) => setCondaPackage(e.target.value)}
								spellCheck="false"
								autoComplete="false"
								onKeyDown={(e) => {
								  if (e.key === "Enter" && condaPackage.trim()) {
									e.preventDefault();
									addCondaPackage();
								  }
								}}
							  />
							</div>
							<Button
							  type="button"
							  onClick={addCondaPackage}
							  disabled={!condaPackage.trim()}
							  variant="primary"
							  size="sm"
							  className="button-primary"
							>
							  Add
							</Button>
						  </div>
                          {condaPackages.length === 0 && (
							<div className="w-full min-h-72 bg-theme-quartary flex items-center justify-center rounded-sm shadow-sm border border-theme-modal">
                            <div className="body-sm-regular text-theme-muted">No Conda packages added.</div>
							</div>
                          )}
						  {condaPackages.length > 0 && (
							<div className="pt-4">
							  <div className="flex flex-col space-y-2 max-h-72 overflow-y-auto pr-1">
								{condaPackages.map((pkg) => (
								  <div
									key={pkg}
									className="flex items-center justify-between bg-theme-quartary rounded-sm px-3 py-3"
								  >
									<span className="body-sm-regular text-theme-primary">{pkg}</span>
									<Tooltip content={`Remove ${pkg}`} className="tooltip tooltip-theme">
										<Button
										type="button"
										variant="ghost"
										onClick={() => removeCondaPackage(pkg)}
										className="button-ghost h-5 w-5 p-0"
										aria-label={`Remove ${pkg}`}
										>
										<CustomIcon id="close" className="h-4 w-4 text-theme" />
										</Button>
									</Tooltip>
								  </div>
								))}
							  </div>
							</div>
						  )}
						</div>
					  )}
					  {/* Custom package input for extras category */}
					  {category.id === "extras" && (
						<div className="space-y-4 p-1">
							<div className="flex items-end gap-4">
								<div className="flex-1">
									<label htmlFor="custom-package" className="body-sm-bold text-theme-secondary mb-1 block">
										Package
									</label>
									<input
										id="custom-package"
										type="text"
										placeholder="PyPI Package Name"
										className="form-input text-sm border-theme-accent rounded p-1 w-full body-sm-regular text-theme-primary shadow-md"
										value={customPackage}
										onChange={(e) => setCustomPackage(e.target.value)}
										spellCheck="false"
										onKeyDown={(e) => {
											if (e.key === "Enter" && customPackage.trim()) {
												e.preventDefault();
												addCustomPackage();
											}
										}}
									/>
								</div>
								<Button
									type="button"
									onClick={addCustomPackage}
									disabled={!customPackage.trim()}
									variant="primary"
									size="sm"
									className="button-primary"
								>
									Add
								</Button>
							</div>
							{customPackages.length === 0 && (
							<div className="w-full min-h-72 bg-theme-quartary flex items-center justify-center rounded-sm shadow-sm border border-theme-modal">
							<div className="body-sm-regular text-theme-muted">No PyPI packages added.</div>
							</div>
							)}
							{customPackages.length > 0 && (
								<div className="pt-4">
									<div className="flex flex-col space-y-2 max-h-72 overflow-y-auto pr-1">
										{customPackages.map((pkg) => (
											<div
												key={pkg}
												className="flex items-center justify-between bg-theme-quartary rounded-sm p-3"
											>
												<span className="body-sm-regular text-theme-primary">{pkg}</span>
												<Tooltip content={`Remove ${pkg}`} className="tooltip tooltip-theme">
													<Button
														type="button"
														variant="ghost"
														onClick={() => removeCustomPackage(pkg)}
														className="button-ghost h-5 w-5 p-0"
														aria-label={`Remove ${pkg}`}
													>
														<CustomIcon id="close" className="h-4 w-4 text-theme" />
													</Button>
												</Tooltip>
											</div>
										))}
									</div>
								</div>
							)}
						</div>
					  )}
					  {/* Regular extensions for this category */}
					  {categoryExtensions.length === 0 ? (
						category.id !== "conda" && category.id !== "extras" && (
						  <div className="p-3 body-xs-regular text-theme-muted bg-theme-quartary rounded-sm shadow-sm border border-theme-modal w-full min-h-64 flex items-center justify-center">
							{localSearchQuery.trim()
							  ? "No extensions in this category match the search."
							  : "No extensions available in this category. If they have already been installed, they will not appear here."}
						  </div>
						)
					  ) : (
						<div>
						  <div className="overflow-y-auto min-h-64">
							  <div className="flex flex-col space-y-2 max-h-[calc(100vh-32rem)] min-h-[100px] mr-2">
							  {categoryExtensions.map((extension) => (
								<div
								  key={extension.id}
								  className="flex items-start justify-between p-2 rounded-sm bg-theme-quartary text-theme-primary relative border border-theme-modal"
								>
								  <input
									type="checkbox"
									id={`ext-${extension.id}`}
									checked={selectedExtensions.includes(
									  extension.id,
									)}
									onChange={() => toggleExtension(extension.id)}
									className="checkbox mt-1 h-4 w-4 text-theme-accent"
								  />
								  <div className="ml-3 w-full">
									<div className="flex flex-wrap items-center justify-start gap-4 w-full">
									  <label
										htmlFor={`ext-${extension.id}`}
										className="text-theme-primary body-md-regular cursor-pointer"
									  >
										{extension.id}
									  </label>
									  {extension.credentials &&
										extension.credentials.length > 0 && (
										  <div className="relative inline-block group">
											<span
											  className="px-2 py-0.5 bg-theme-accent text-theme-accent body-xs-medium rounded-full"
											  title="API key required"
											>
											  {extension.credentials.join(", ")}
											</span>
										  </div>
										)}
									</div>
									<p className="text-theme-secondary body-xs-regular mt-2">
									  {extension.description}
									</p>
									{extension.instructions && (
										<div className="bg-theme-primary p-2 mt-2 body-xs-regular text-theme-secondary rounded-sm shadow-sm">
										<details>
											<summary className="cursor-pointer text-theme-primary body-xs-medium">
											Setup instructions
											</summary>
											<div className="mt-2 p-2">
											<ReactMarkdown
												className="markdown-content whitespace-pre-line"
												components={{
												img: ({ ...props }) => (
													<img
													{...props}
													className="max-w-full h-auto border border-theme rounded-md"
													style={{
														maxHeight: "300px",
													}}
													loading="lazy"
													alt={
														props.alt ||
														"Setup instruction image"
													}
													/>
												),
												a: ({ ...props }) => (
													<a
													{...props}
													className="text-blue-500 underline"
													target="_blank"
													rel="noreferrer noopener"
													/>
												),
												p: ({ ...props }) => (
													<p
													{...props}
													className="my-2 text-theme-secondary"
													/>
												),
												// eslint-disable-next-line @typescript-eslint/no-unused-vars
												code: ({ inline, ...props }) => (
													<code
													{...props}
													className="bg-theme-tertiary px-1 py-0.5 rounded text-theme-primary"
													/>
												),
												div: ({ ...props }) => (
													<div {...props} />
												),
												}}
											>
												{extension.instructions}
											</ReactMarkdown>
											</div>
										</details>
										</div>
									)}
								  </div>
								</div>
							  ))}
							</div>
						  </div>
						</div>
					  )}
					</div>
				  </div>
				);
			  })}
			</div>
		</div>
			{/* Global Summary and Install button */}
			<div className="flex items-center justify-between">
			  <div className="flex items-center gap-2 ml-5">
				<span className="body-xs-regular text-theme-muted flex items-center">
				  {condaPackages.length} Conda + {customPackages.length} PyPI + {selectedExtensions.length} OpenBB extensions selected
				</span>
			  </div>
			  <div className="flex items-center justify-end gap-2">
				<Tooltip
				  content="Cancel and go back."
				  className="tooltip-theme"
				>
				  <Button
					onClick={onCancel}
					variant="outline"
					size="sm"
					className="button-outline shadow-md px-2 py-1"
					disabled={isInstalling}
				  >
					Back
				  </Button>
				</Tooltip>
				<Tooltip
				  content="Install the selected extensions."
				  className="tooltip-theme"
				>
				  <Button
					onClick={handleInstallExtensions}
					variant="primary"
					size="sm"
					className="button-primary shadow-md px-2 py-1 whitespace-nowrap"
				  >
					Create Environment
				  </Button>
				</Tooltip>
			  </div>
			</div>
		  </>
		)}
		{error && (
		<div className="fixed inset-0 z-50 flex items-center justify-center">
		  <div className="bg-theme-secondary border-red-800 rounded-lg shadow-lg max-w-2xl w-full p-6">
			<h2 className="text-red-600 text-lg font-bold mb-2">Extension Error</h2>
			<div className="mb-4 mt-4 pl-5 pt-1 pr-1 pb-1 border-red-800 bg-red-900/30 text-red-300 rounded-md text-xs font-mono">
			  <div className="whitespace-pre-wrap overflow-auto max-h-60 mt-0.5 mb-0.5">
				{error}
			  </div>
			</div>
			<div className="flex justify-end">
			  <Button
			  onClick={() => setError(null)}
			  variant="outline"
			  size="sm"
			  className="button-outline shadow-sm"
			  >
			  <span className="body-xs-bold text-theme">Dismiss</span>
			  </Button>
			</div>
		  </div>
		</div>
		)}
	  </div>
	</div>
  );
};
